<template>
  <div>
    <el-input style="width: 200px;" v-model="query.realName" placeholder="真实姓名" class="filter-item"></el-input>
    <el-input style="width: 200px;" v-model="query.account" placeholder="用户名" class="filter-item"></el-input>
    <el-input style="width: 200px;" v-model="query.phone" placeholder="电话" class="filter-item"></el-input>


<!--    <el-select v-model="type" class="filter-item" placeholder="请选择">
      <el-option label="全部" value="0" ></el-option>
      <el-option v-for="item in map" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-date-picker class="filter-item"
      v-model="query.startDate"
      type="date"
      placeholder=""
      value-format="yyyy-MM-dd">
    </el-date-picker>

    <el-date-picker class="filter-item"
      v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="录入开始日期"
      end-placeholder="录入结束日期">
    </el-date-picker>-->

    <el-button style="margin-left: 5px" @click="getRecords" type="primary" class="filter-item">查询</el-button>
    <el-button style="margin-left: 5px" @click="getRecords" type="danger" class="filter-item">刷新</el-button>
    <slot></slot>
    <el-button v-if="isShowExport" @click="download" type="primary" class="filter-item">导出</el-button>
    <el-upload v-if="isShowUpload" class="filter-item"
               style="margin-left: 10px"
               :action="host+'/guard/importFile?importType=user&token='+token"
               accept=".xls,.xlsx"
               :on-success="uploadSuccess"
               :on-error="uploadError"
               :on-progress="uploadProcess"
               :show-file-list="false">
      <el-button type="primary">导入</el-button>
    </el-upload>
    <el-button style="margin-left: 5px" @click="handleDelete" type="primary" class="filter-item">删除</el-button>
  </div>
</template>

<script>

import {exportXls, myGet} from "@/utils/myUtils";
import {getToken} from "@/utils/auth";
const urlDelete = '/guard/user/del';
const urlDownload = '/guard/download';

export default {
  name: "MyQuery",
  props:{
    selectId: {type:Array,default:[]},
    isShowExport: {type:Boolean,default:false},
    isShowUpload: {type:Boolean,default:false},
  },
  data() {
    return {
      query: {
        account: '',
        realName: '',
        phone: '',
      },
      token: "",
      host: process.env.VUE_APP_HOST,
    }
  },
  methods: {

    download() {
      const url = this.host + urlDownload + "?downloadType=user"
      exportXls(url);
    },
    uploadSuccess(res, file, fileList) {
      if (res.status) {
        this.$message.success(res.msg)
        this.$emit('reloadRecords')
      } else {
        this.$message.error(res.msg)
      }
    },
    uploadError(err, file, fileList) {
      console.log(err)
    },
    uploadProcess(event, file, fileList) {
      console.log(event)
    },

    getRecords() {
      this.$emit('queryRecords', this.query)
    },
    reload() {
      this.$emit('reloadRecords')
    },
    handleDelete() {
      if (this.selectId.length <= 0) {
        this.$message.error('请先选择项目！')
        return;
      }
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.selectId
        myGet(urlDelete, {id}).then(res => {
          if (res.status) {
            this.$message.success(res.msg)
            this.$emit('queryRecords', this.query)
          }
        })
      });
    },
  },
  mounted() {
    this.token = getToken()
  }
}
</script>

<style scoped>

</style>
